<template>
  <div class="step-header">
    <div v-if="type === 'dialog'" class="dialog-title">
      {{ title }}
    </div>
    <div v-else class="title" :style="{width: width}">
      {{ title }}
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'StepHeader',
  props: {
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '10rem'
    }
  }
}
</script>

<style scoped lang="scss">
.step-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  //margin-left: 1.25rem;
  .title {
    height: 22px;
    width: 10rem;
    line-height: 22px;
    border-left: 4px solid #20d30d;
    padding-left: 8px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    margin-left: 0px;
    color: #1c1c1c;
    font-style: normal;
  }

  .dialog-title{
    padding-right: 32px;

    height: 25px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    color: #333399;
    line-height: 25px;
    text-align: left;
    font-style: normal;
  }

  .content {
    flex-grow: 1;
    @apply h-[22px];
  }
}
</style>
